<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fnt" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <meta name="author" content="order by dede58.com"/>
		<title>CDC疾控中心</title>
		<link rel="stylesheet" type="text/css" href="<%=path%>/web/css/style1.css">
		<style type="text/css">
			img.wp-smiley,img.emoji {
				display: inline !important;
				border: none !important;
				box-shadow: none !important;
				height: 1em !important;
				width: 1em !important;
				margin: 0 .07em !important;
				vertical-align: -0.1em !important;
				background: none !important;
				padding: 0 !important;
			}
			input[type="submit"] {
				background: #f0f0f0;
				color: #000;
				font-size: 18px;
				border: none;
				text-transform: capitalize;
				width: 10%;
				outline: none;
				cursor: pointer;
				-webkit-appearance: none;
				padding: 14px 0;
				margin-top: 5px;
				margin-left: 800px;
				transition: 0.5s all;
				-webkit-transition: 0.5s all;
				-moz-transition: 0.5s all;
				-o-transition: 0.5s all;
			}

		</style>
		<link rel="stylesheet" href="<%=path%>/web/css/style/style2.css" />
		<script src="<%=path%>/web/js/jq.js"></script>
		<script src="<%=path%>/web/js/jq1.js"></script>
	</head>
<body>
<jsp:include page="headerandfoter/header.jsp"></jsp:include>
	<br><br><br>
<!-- end banner_x -->
<!-- self_info -->
	<div class="grzxbj">
		<div class="selfinfo center">
		<div class="lfnav fl">
			<div class="subddzx">
				<ul>
					<li></li>
					<li><a href="<%=path%>/services/user_info"><img src="<%=path%>/asdf/images/${userInfo.pic}" style="width:150px; height:150px; border-radius:100%; overflow:hidden; "></a></li><br><br><br><br><br><br><br><br><br><br>
					<li>${userInfo.userName}</li>
				</ul>
			</div>
			<div class="ddzx"><a href="<%=path%>/services/update_user_info">修改资料</a></div>
			<div class="ddzx"><a href="<%=path%>/services/update_password">修改密码</a></div>
			<div class="ddzx"><a href="<%=path%>/services/my_collection">我的收藏</a></div>
			<div class="ddzx"><a href="<%=path%>/services/examination_record">考试记录</a></div>
		</div>
		<div class="rtcont fr">
			<div class="grzlbt ml40">修改资料</div>
			<form action="/services/update_user_info_form" method="post" enctype="multipart/form-data">
				<div class="subgrz ml40"><span>头像</span>
					<div id="filePic" style="padding-left: 100px;padding-top:8px;float: left;"><img src="<%=path%>/asdf/images/${userInfo.pic}" style="width:140px; height:140px; border-radius:100%; overflow:hidden;"></div>
						<input type="file" name="file" id="file" placeholder="${userInfo.pic}"/></div>
				<div class="subgrzl ml40"><span>姓名</span>
					<span><input style="border: none;padding: 15px 0px 12px 5px;font-size: 15px;" type="text" name="userName" placeholder="${userInfo.userName}"/></span></div>
				<div class="subgrzl ml40"><span>性别</span>
					<span>
						<c:if test="${userInfo.sex eq '男'}">
							<input type="radio" value="1" name="sex" checked/>男
							<input type="radio" value="0" name="sex" />女</c:if>
						<c:if test="${userInfo.sex eq '女'}">
							<input type="radio" value="1" name="sex" />男
							<input type="radio" value="0" name="sex" checked/>女</c:if>
					</span></div>
				<div class="subgrzl ml40"><span>出生日期</span>
					<span><input style="border: none;padding: 15px 0px 8px 5px;font-size: 15px;" type="date" name="birthday" value="${userInfo.birthday1}"/></span></div>
				<div class="subgrzl ml40"><span>联系方式</span>
					<span><input style="border: none;padding: 15px 0px 12px 5px;font-size: 15px;" type="text" name="phone" placeholder="${userInfo.phone}"/></span></div>
				<div class="subgrzl ml40"><span>联系地址</span>
					<span><input style="border: none;padding: 15px 0px 12px 5px;font-size: 15px;" type="text" name="area" placeholder="${userInfo.area}"/></span></div>
					<input type="submit" value="确定"/>
				<br><br>
			</form>
		</div>
		<div class="clear"></div>
		</div>
	</div>
<!-- self_info -->

<jsp:include page="headerandfoter/foter.jsp"></jsp:include><!-- 包含尾部 -->
	<script type="text/javascript">
		window.onload = function() {
			var file = document.getElementById('file');
			var filePic = document.getElementById('filePic');
			file.onchange = function() {
				var reader = new FileReader();
				reader.readAsDataURL(file.files[0]);
				reader.onload = function() {
					filePic.querySelector('img').src = reader.result;
				}
			}
		}
	</script>
</body>
</html>